<template>
  <div class="header-container">
    <a-layout-header style="background: #fff; padding: 0">
      <a-icon
        class="trigger"
        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
        @click="changeCollapsed"
      />
    </a-layout-header>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState({
      'collapsed': state => state.system.collapsed
    })
  },
  methods: {
    ...mapMutations([
      'changeCollapsed'
    ])
  }
}
</script>
<style lang="scss" scoped>
.header-container {
  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .trigger:hover {
    color: #1890ff;
  }
}
</style>
